<template>
  <div class="home">
    <!-- 3使用组件-->
    <home-header></home-header>
    <home-lunbo :list="lunboList"></home-lunbo>
    <home-spot :list="ioncsList"></home-spot>
    <home-all-list :list="allLists"></home-all-list>
    <home-recommend :list="recoList"></home-recommend>
    <home-weekend :list="weekList"></home-weekend>
  </div>
</template>
<script>
import HomeHeader from './coments/Header.vue'// 1引入组件
import HomeLunbo from './coments/Lunbo.vue'
import HomeSpot from './coments/Spot.vue'
import HomeAllList from './coments/AllList.vue'
import axios from 'axios'
import HomeRecommend from './coments/Recommend.vue'
import HomeWeekend from './coments/Weekend.vue'

export default {
  name: 'home',
  components: {// 2注册组件
    HomeHeader,
    HomeLunbo,
    HomeSpot,
    HomeAllList,
    HomeRecommend,
    HomeWeekend
  },
  data () {
    return {
      lunboList: [],
      ioncsList: [],
      allLists: [],
      recoList: [],
      weekList: []
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('/localdata/index.json')
        .then((response) => {
          this.getHomeSuccess(response)
        })
        .catch(() => {
        })
    },
    getHomeSuccess (response) {
      let dataObj = response.data// 获取json里的数据
      let dataList = dataObj.data// 获取列表里的数据
      if (dataObj.ret && dataList) {
        this.lunboList = dataList.swiperList
        this.ioncsList = dataList.spotList
        this.allLists = dataList.addList
        this.recoList = dataList.recommendList
        this.weekList = dataList.weekendList
      }
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>
